<template>
  <div class="max-w-2xl mx-auto flex flex-col text-left justify-center">
    <div class="text-center mb-5">basic usage</div>
    <el-transfer
      v-model="value"
      :data="data"
      class="custom-transfer"
      filterable
    >
    </el-transfer>

    <div class="text-center mb-5">可搜索</div>
    <el-transfer
      v-model="value2"
      :data="data2"
      filterable
      :filter-method="filterMethod"
      :show-select="false"
      class="custom-transfer"
    >
    </el-transfer>
    <div class="h-10"></div>
    <div class="text-center mb-5">使用 render-content 自定义数据项</div>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value3"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        @change="handleChange"
        :data="data3"
      >
        <el-button class="transfer-footer" slot="left-footer" size="small">
          操作
        </el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">
          操作
        </el-button>
      </el-transfer>
    </div>

    <div class="text-center m-5">使用 scoped-slot 自定义数据项</div>
    <el-transfer
      class=""
      v-model="value4"
      filterable
      :left-defaut-checked="[2, 3]"
      :right-default-checked="[1]"
      :titles="['Source', 'Target']"
      :button-texts="['到左边', '到右边']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      @change="handleChange"
      :data="data4"
    >
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      <el-button
        slot="left-footer"
        size="small"
        class="transfer-footer ml-5 p-2"
      >
        操作
      </el-button>
      <el-button
        class="transfer-footer ml-5 p-2"
        slot="right-footer"
        size="small"
      >
        操作
      </el-button>
    </el-transfer>
  </div>
</template>

<script lang="jsx">
export default {
  name: "TransferComponent",
  data() {
    const generateData = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    const generateData2 = () => {
      const data = [];
      const cities = [
        "上海",
        "北京",
        "广州",
        "深圳",
        "杭州",
        "成都",
        "武汉",
        "西安",
        "厦门",
        "长沙",
      ];
      const pinyins = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "hangzhou",
        "chengdu",
        "wuhan",
        "xian",
        "xiamen",
        "changsha",
      ];
      cities.forEach((city, index) => {
        data.push({
          key: index,
          label: city,
          value: pinyins[index],
        });
      });
      return data;
    };
    const generateData3 = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      data: generateData(),
      data2: generateData2(),
      data3: generateData3(),
      data4: generateData3(),
      value: [1, 4],
      value2: [],
      value3: [],
      value4: [],
      filterMethod(query, item) {
        return item.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
      },
      renderFormat(item) {
        return `${item.label}(${item.value})`;
      },
    };
  },
  methods: {
    renderFunc(h, option) {
      return (
        <span>
          {option.key} - {option.label}
        </span>
      );
    },
    /**
     * 处理值变化的方法
     *
     * @param value 当前值
     * @param direction 移动方向
     * @param movedKeys 被移动的键数组
     */
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
  },
};
</script>
<style scoped>
.transfer-footer {
  margin: 5px auto 5px 20px;
  padding: 10px 10px;
  text-align: center;
}
</style>
